<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <script src="js/index.js"></script>
    <title>京东手机版</title>
</head>

<body>
    <div class="search">
        <div class="search-left"></div>
        <div class="search-nav ">
            <div class="logo"></div>
            <div class="search-icon"></div>
            <input type="text" value="机械键盘">
        </div>
        <div class="search-right">
            <span>登录</span>
        </div>
    </div>
    <div class="main-content">
        <div class="slider">
            <!-- Swiper -->

            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider1.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider2.png" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider3.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider4.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider5.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider6.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider7.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="#"><img src="./images/slider8.jpg" alt=""></a></div>
                </div> <a href="#"></a>
                <div class="swiper-pagination"></div>
            </div>
            <div class="slider-bg"></div>
        </div>
        <div class="class-all">
            <div class="class-box">
                <div class="classification">
                    <div class="classification-one ">
                        <ul>
                            <li><a href="#">
                                    <img src="images/class1.png" alt="">
                                    <span>京东超市</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class2.png" alt="">
                                    <span>数码电器</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class3.png" alt="">
                                    <span>京东服饰</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class4.png" alt="">
                                    <span>京东生鲜</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class5.png" alt="">
                                    <span>京东到家</span>
                                </a></li>
                        </ul>
                    </div>
                </div>
                <div class="classification">
                    <div class="classification-one">
                        <ul>
                            <li><a href="#">
                                    <img src="images/class6.png" alt="">
                                    <span>充值缴费</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class7.png" alt="">
                                    <span>物流查询</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class8.png" alt="">
                                    <span>领劵</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class9.png" alt="">
                                    <span>领津贴</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class10.png" alt="">
                                    <span>PLUS会员</span>
                                </a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="class-box">
                <div class="classification">
                    <div class="classification-one ">
                        <ul>
                            <li><a href="#">
                                    <img src="images/class11.png" alt="">
                                    <span>京东国际</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class12.png" alt="">
                                    <span>京东拍卖</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class13.png" alt="">
                                    <span>看病购药</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class14.png" alt="">
                                    <span>玩3C</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class15.png" alt="">
                                    <span>沃尔玛</span>
                                </a></li>
                        </ul>
                    </div>
                </div>
                <div class="classification">
                    <div class="classification-one">
                        <ul>
                            <li><a href="#">
                                    <img src="images/class16.png" alt="">
                                    <span>美妆馆</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class17.png" alt="">
                                    <span>京东旅行</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class18.png" alt="">
                                    <span>拍拍二手</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class19.png" alt="">
                                    <span>潮染青年</span>
                                </a></li>
                            <li><a href="#">
                                    <img src="images/class20.png" alt="">
                                    <span>全部</span>
                                </a></li>
                        </ul>

                    </div>

                </div>

            </div>
        </div>
        <div class="dot">
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- secondsKill 秒杀 -->
        <div class="secondsKill">
            <div class="secondsKill-top">
                <div class="secondsKill-top-left">
                    <div class="secondsKill-top-left-title">
                        京东秒杀
                    </div>
                    <div class="secondsKill-top-left-num">22</div>
                    <div class="secondsKill-top-left-time">
                        <ul>
                            <li>00</li>
                            <span>:</span>
                            <li>00</li>
                            <span>:</span>
                            <li>00</li>
                        </ul>
                    </div>
                </div>
                <div class="secondsKill-top-right">
                    <div class="secondsKill-top-right-more">更多秒杀</div>
                </div>
            </div>
            <div class="secondsKill-shop">
                <ul>
                    <li><a href="#"></a>
                        <img src="./upload/miaosha1.dpg" alt="">
                        <div class="shop-price"> <em>¥</em>
                            <span class="shop-price-num">89</span>
                        </div>

                    </li>
                    <li><a href="#"></a>
                        <img src="./upload/miaosha2.dpg" alt="">
                        <div class="shop-price"> <em>¥</em>
                            <span class="shop-price-num">1169</span>
                        </div>

                    </li>
                    <li><a href="#"></a>
                        <img src="./upload/miaosha3.dpg" alt="">
                        <div class="shop-price"> <em>¥</em>
                            <span class="shop-price-num">479</span>
                        </div>

                    </li>
                    <li><a href="#"></a>
                        <img src="./upload/miaosha4.dpg" alt="">
                        <div class="shop-price"> <em>¥</em>
                            <span class="shop-price-num">695</span>
                        </div>

                    </li>
                    <li><a href="#"></a>
                        <img src="./upload/miaosha5.dpg" alt="">
                        <div class="shop-price"> <em>¥</em>
                            <span class="shop-price-num">56</span>
                        </div>

                    </li>
                    <li><a href="#"></a>
                        <img src="./upload/miaosha6.dpg" alt="">
                        <div class="shop-price"> <em>¥</em>
                            <span class="shop-price-num">605</span>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="shop-content">
        <div class="shop-content-left">
            <ul>
                <li><a href="#">
                        <img src="./upload/index-left1.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">LAB SERIES 朗仕保湿焕能爽肤水200ml（蓝宝瓶 舒缓透亮 补水保湿 爽肤水 男士护肤）</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">261.</span>
                            <em>25</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">5000+条评论</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index-left2.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">LAB SERIES 朗仕锋范紧致三部曲（洗面奶100ml+水200ml+乳液45ml）男士护肤套装</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">1634.</span>
                            <em>00</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">20万+条评论</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.left3.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">碧欧泉（BIOTHERM）男士水动力保湿爽肤水 200ml（爽肤水 男士护肤 补水保湿 净澈毛孔）</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">278.</span>
                            <em>40</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">10万+条评论</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.left4.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">碧欧泉（BIOTHERM）男士蓝钻滋养紧致三步曲护肤套装(洁面乳125ml+紧肤露200ml+精华50ml)滋润修护紧致轮廓
                        </div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">870.</span>
                            <em>00</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">10万+条评论</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.left5.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">LAB SERIES 朗仕多功能保养乳液50ml（润肤乳 补水保湿 控油舒缓 男士乳液）</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">1850.</span>
                            <em>00</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">10万+条评论</span>

                        </div>
                    </a></li>
            </ul>
        </div>
        <div class="shop-content-right">
            <ul>
                <li><a href="#">
                        <img src="./upload/index.right1.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">中麒 白色陶瓷花瓶干花插花简约创意水养现代北欧客厅餐桌家居装饰摆件 【超值2只装】石铃+芷巧</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">13.</span>
                            <em>80</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">200+条评论</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.right2.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">可狄 复古ins个性创意北欧玻璃仙人掌花瓶桌面水培鲜干插花器摄影道具hc， 小蛮腰</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">12.</span>
                            <em>00</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">100%好评率</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.right3.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">舌里 全麦面包 0脂肪无油无蔗糖 黑麦粗粮健身代餐手撕面包片送礼轻食吐司零食早餐1000g/箱</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">24.</span>
                            <em>90</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">20万+条评论</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.right4.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name"> 【清爽一夏】冠农新疆特产番茄丁罐头210g/罐自然熟西红柿丁番茄红素沙拉番茄酱膏 番茄丁210g*6罐</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">94.</span>
                            <em>00</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">100%好评率</span>

                        </div>
                    </a></li>
                <li><a href="#">
                        <img src="./upload/index.right5.webp" alt="" class="shop-content-img">
                        <div class="shop-content-name">百思图 双面搓澡巾拉背条浴花三件套沐浴搓澡 套装</div>
                        <div class="shop-content-price">
                            <em>¥</em>
                            <span class="shop-content-price-num">10.</span>
                            <em>00</em>
                        </div>
                        <div class="shop-content-comments">
                            <span class="shop-content-comments-font">1000+条评论</span>

                        </div>
                    </a></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <!-- theLogin theClient copyright -->
        <div class="the-login">
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">客户服务</a></li>
                <li><a href="javascript:;" class="footer-back-top">返回顶部</a></li>
            </ul>
        </div>
        <div class="the-client">
            <ul>
                <li><a href="#"><img src="./images/footer1.png" alt=""></a></li>
                <li><a href="#"><img src="./images/footer2.png" alt=""></a></li>
                <li><a href="#"><img src="./images/footer3.png" alt=""></a></li>
            </ul>
        </div>
        <div class="copyright">
            Copyright © 2004-2020 京东JD.com 版权所有
        </div>
        <div class="footer-nav">
            <ul>
                <li><a href="#"><img src="./images/footer-nav1.png" alt=""></a></li>
                <li><a href="#"><img src="./images/footer-nav2.png" alt=""></a></li>
                <li><a href="#"><img src="./images/footer-nav3.png" alt=""></a></li>
                <li><a href="#"><img src="./images/footer-nav4.png" alt=""></a></li>
                <li><a href="#"><img src="./images/footer-nav5.png" alt=""></a></li>
            </ul>
        </div>

    </div>
    <div class="back-top"></div>
    <!-- Swiper JS -->
    <script src="js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->

    <script>
        var swiper = new Swiper(".mySwiper", {
            // spaceBetween: 1,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,

            },
        });
    </script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            autoplay: true,//等同于以下设置
            /*autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
              },*/
        });
    </script>

</body>

</html>